<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 用户信息
      </p>
      <p slot="extra" style="color: #999;font-size: 12px;">
        <label style="color: #FF3B30;">*</label> 为必填
      </p>
      <Form ref="formModel" :rules="ruleValidate" :model="bloc.form" :label-width="100" label-position="right">
        <FormItem label="姓名:" prop="userName" required>
          <Input type="text" v-model="bloc.form.userName" placeholder="请填写姓名" style="width: 400px;height: 40px;"/>
        </FormItem>
        <FormItem label="手机:" prop="phone" required>
          <Input type="text" v-model="bloc.form.phone" placeholder="请填写手机号码" style="width: 400px"/>
        </FormItem>
        <FormItem label="登录账号:" prop="email">
          <Input type="text" v-model="bloc.form.email" placeholder="请填写登录账号，邮箱格式" style="width: 400px"/>
        </FormItem>
        <FormItem label="登录密码:" prop="password" v-if="isAdd">
          <Input type="password" autocomplete='new-password' v-model="bloc.form.password" placeholder="请填写登录密码"
                 style="width: 400px"/>
        </FormItem>
        <FormItem label="重复密码:" prop="repeatPassword" v-if="isAdd">
          <Input type="password" autocomplete='new-password' v-model="bloc.form.repeatPassword" placeholder="请填写登录密码"
                 style="width: 400px"/>
        </FormItem>
<!--        <FormItem label="角色:" prop="roles" v-if="bloc.hasFormInfo" required>-->
        <FormItem label="角色:" prop="roles" required>
          <RoleSelector
            :tagCount="3"
            :roles="bloc.form.roles"
            :companyId="bloc.form.companyId"
            @on-change="value=>bloc.form.roles=value"></RoleSelector>
        </FormItem>
      </Form>
      <div style="margin: 20px 0px 35px 25px;">
        <router-link :to="{ path: '/account'}">
          <Button style="width: 100px;height: 40px;">返回</Button>
        </router-link>
        <Button type="primary" style="margin-left: 30px;width: 100px;height: 40px;" :loading="btnload.loading"
                @click="handleOk('formModel')">保存
        </Button>
      </div>

    </Card>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {Route} from 'vue-router';
  import {FormBloc} from '@/view/account/FormBloc';
  import {isEmpty} from '@/base/util/Strings';
  import {getValidatePhone, getValidatePsd} from '@/base/util/Validate';
  import RoleSelector from '@/component/RoleSelector.vue';
  import {Loading} from '@/base/Loading';

  @Component({components: {RoleSelector}})
  export default class extends Vue {
    beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
      next(vm => {
        if (!vm.isAdd) vm.bloc.load(vm.idx);
      });
    }

    get isAdd() {
      return !this.idx;
    }

    get idx() {
      return Number(this.$route.params.id);
    }

    bloc: FormBloc = new FormBloc();
    btnload = new Loading();

    validateRepeatPassword = (rule: any, value: string, callback: any) => {
      isEmpty(this.bloc.form.repeatPassword) ||
      this.bloc.form.password !== this.bloc.form.repeatPassword
        ? callback(new Error('前后密码输入不一致。')) : callback();
    };
    validatePhone = (rule: any, value: string, callback: any) => {
      if (isEmpty(value)) return callback(new Error('手机号码不能为空'));
      if (!getValidatePhone(value)) return callback(new Error('请输入正确的手机号码'));
      return callback();
    };
    validatePsd = (rule: any, value: string, callback: any) => {
      if (isEmpty(value)) return callback(new Error('密码不能为空'));
      if (!getValidatePsd(value)) return callback(new Error('密码由字母、数字、下划线组成且长度为6-20'));
      return callback();
    };
    ruleValidate = {
      userName: [
        {required: true, message: '姓名不能为空', trigger: 'blur'},
        {type: 'string', max: 5, message: '姓名不能超过5个字', trigger: 'blur'}
      ],
      phone: [
        {required: true, validator: this.validatePhone, trigger: 'blur'}
      ],
      email: [
        {required: true, message: '请填写登录账号', trigger: 'blur'},
        {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
      ],
      password: [
        {required: true, validator: this.validatePsd, trigger: 'blur'}
      ],
      repeatPassword: [
        {validator: this.validateRepeatPassword, trigger: 'change'}
      ],
      roles: [
        {required: true, type: 'array', min: 1, message: '请选择一个角色', trigger: 'change'}
      ]
    };

    handleCancel() {
      this.$router.push({path: `/account`});
    }

    handleOk(name) {
      const formRef: any = this.$refs[name];
      formRef.validate((valid) => {
        if (valid) {
          this.btnload.loading = true;
          this.bloc.save(this.isAdd ? '' : this.idx).then(res => {
            this.$Message.success('保存成功');
            this.btnload.loading = false;
            this.handleCancel();
          }).catch(err => {
            this.btnload.loading = false;
            this.$Message.error(err.message || '保存失败');
            console.log('出错啦::::', err);
          });
        }
      });
    }
  }
</script>

<style lang="less" scoped>
</style>
